// 一个像素点 坐标，边长，颜色
class Pixel {
    constructor(x, y, side, color) {
        this.x = x
        this.y = y
        this.side = side
        this.color = color
    }
}

// 构造器参数 画布的坐标， 每个像素的边长， 每行每列分别几个像素
// x,y 是画布的左下角，graphics矩形是左下开始画的
// 栅格坐标
class PixelCanvas {
    constructor(x, y, pixelSide, row, col) {
        this.x = x
        this.y = y
        this.pixelSide = pixelSide
        this.row = row
        this.col = col
        this.pixelData = []
        this.init()
    }

    // 初始化
    init() {
        this.pixelInit()
        this.canvasBorderInit()
    }

    // 像素格初始化
    pixelInit() {
        for (let i = 0; i < this.row; i++) {
            for (let j = 0; j < this.col; j++) {
                let [r, g, b, a] = [0, 0, 0, 0]
                let color = new cc.Color(r, g, b, a)
                let grid = cc.v2(i, j)
                let position = this.gridToPosition(grid)
                let pixel = new Pixel(position.x, position.y, this.pixelSide, color)
                this.pixelData.push(pixel)
            }
        }
    }

    // 初始化画布的边框
    canvasBorderInit() {
        this.borderWidth = this.pixelSide * this.row
        this.borderHeight = this.pixelSide * this.col
    }

    getBorderData() {
        return {
            x: this.x,
            y: this.y,
            w: this.borderWidth,
            h: this.borderHeight,
        }
    }

    getPixelData() {
        return this.pixelData
    }

    // 索引转栅格坐标
    indexToGrid(index) {
        let x = Math.floor(index / this.col)
        let y = index % this.row
        return cc.v2(x, y)
    }

    // 栅格坐标转索引
    gridToindex(grid) {
        let index = grid.x * this.col + grid.y
        return index
    }

    // 栅格坐标转画布坐标   先计算左上角的坐标
    gridToPosition(grid) {
        let offset = this.pixelSide // 因为graphics.rect 以左下角为原点绘制
        let topLeftCorner = cc.v2(this.x, this.y + this.pixelSide * this.col)
        let x = topLeftCorner.x + grid.x * this.pixelSide
        let y = topLeftCorner.y - grid.y * this.pixelSide - offset
        return cc.v2(x, y)
    }

    // 画布坐标转栅格坐标
    positionToGrid(position) {
        // 最左边和最上边的边界
        let left = this.x
        let top = this.y + this.pixelSide * this.col
        // 判断这个值是否在两个值之间
        let bewtreen = (value, min, max) => value > min ? (value < max ? true : false) : false

        let x = 0, y = 0
        for (let i = 0; i < this.row; i++) {
            let px = position.x
            let min = left + this.pixelSide * i
            let max = left + this.pixelSide * (i + 1)
            // console.log(px, min, max, 'x')
            if (bewtreen(px, min, max)) {
                // console.log(px, min, max, 'x')
                x = i
                break
            }
        }

        for (let i = 0; i < this.col; i++) {
            let py = position.y
            let min = top - this.pixelSide * (i + 1)
            let max = top - this.pixelSide * i
            // console.log(py, min, max, 'y', i)
            if (bewtreen(py, min, max)) {
                // console.log(py, min, max, 'y')
                y = i
                break
            }
        }
        return cc.v2(x, y)
    }

    // 判断是否点击到画布内
    pointInCanvas(point) {
        let left = this.x
        let right = this.x + this.pixelSide * this.row
        let top = this.y + this.pixelSide * this.col
        let bottom = this.y
        // console.log(`left:${left}, right:${right}, top:${top}, bottom:${bottom}`)
        // 判断是否在区域内
        if (point.x > left && point.x < right) {
            if (point.y > bottom && point.y < top) {
                return true
            }
        }
        return false
    }

    // 像素设置颜色
    pixelSetColor(index, color) {
        this.pixelData[index].color = color
    }

}

export default PixelCanvas